<template>
	<div class="users">
		<h1>Users</h1>
		<form v-on:submit="addUser">
			<input type="text" v-model="newUser.name" placeholder="Enter name"/>
			<input type="text" v-model="newUser.email" placeholder="Enter name"/>
			<input type="submit" value="Submit"/>
		</form>
		<!--展示用户信息-->
		<ul>
			<li v-for="user in users">
				<input type="checkbox" class="toggle" v-model="user.contacted"/>
				<span :class="{contacted : user.contacted}">
					{{user.name}} : {{user.email}}
					<button v-on:click="deleteUser(user)">X</button>
				</span>
			</li>
		</ul>
	</div>
</template>

<script>
	export default {
		name : "users",
		data (){
			return { 
			newUser : {},
			users : [{
				name : "lisi",
				email : "lisi@qq.com",
				contacted : false
			},{
				name : "wangwu",
				email : "lisi@qq.com",
				contacted : false
			},{
				name : "zhangsan",
				email : "lisi@qq.com",
				contacted : false
			}]
			}
		},
		methods : {
			addUser : function(e){
				this.users.push({
						name : this.newUser.name,
						email : this.newUser.email,
						contacted : false
				});
				e.preventDefault();
			},
			deleteUser : function(){
				this.users.splice(this.users.indexOf(user),1)
				
			}
		}
	}
	
</script>

<style scoped>
	.contacted{
	 text-decoration: line-through;
	}
</style>